<template>
    <div v-loading='loading'>
        <slot></slot>
    </div>
    <div :class='$style.pagination'>
        <el-pagination background layout='total, sizes, prev, pager, next' v-model:currentPage='pageNo'  v-model:pageSize='pageSize' :disabled='loading' :page-sizes='pageSizes' :total='total' @current-change='pageNoChange' @size-change='pageSizeChange'></el-pagination>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue'

const Props = {
        api : Function,
        queryParams : {
            type : Object,
            default() {
                return {}
            }
        }
    }

export default defineComponent({
    props : Props,

    setup(props : any, { emit }) {
        const state = reactive({
            total : 0,
            pageCount : 0,
            pageSizes : [20, 100, 200],
            pageNo : 1,
            pageSize : 0,
            loading : false,
            queryParams : {}
        })

        state.pageSize = state.pageSizes[0]

        const methods = {
            pageNoChange(pageNo:number) {
                methods.load()
                
            },

            pageSizeChange(pageSize) {
                methods.load()
            },

            async load() {
                state.loading = true
                const data:any = await props.api({...props.queryParams, pageNo : state.pageNo, pageSize : state.pageSize})
                state.loading = false
                state.total = data.total
                
                emit('finish', data.rows)
            },

            reload() {
                state.pageNo = 1
                methods.load()
            }
        }

        methods.load()

        return {
            ...toRefs(state),
            ...methods
        }

    }
})
</script>

<style scoped module lang='scss'>
    .pagination{
        text-align: right;
        padding:20px 0;

        @media screen and (max-device-width:$mediaCriticalWidth) {
            text-align: center;
        }
    }

    
</style>